<template>
  <div class="view-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="未读消息" name="new-message">
        <keep-alive>
          <list empty-text="暂无新信息" :is-read="false"></list>
        </keep-alive>
      </el-tab-pane>
      <el-tab-pane label="已读消息" name="old-message">
        <keep-alive>
          <list empty-text="暂无信息" :is-read="true"></list>
        </keep-alive>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
  import List from './list.vue';
  import {MESSAGE_TAB_KEY, getTabName, setTabName} from '@/utils/tabUtil';

  export default {
    name: 'message-index',
    components: {
      'list':List,
    },
    data()
    {
      return {
        activeName: 'new-message',
      }
    },
    mounted(){
      let activeTab = getTabName(MESSAGE_TAB_KEY);
      if(activeTab && activeTab !== 'undefined')
      {
        this.activeName = activeTab;
      }
    },
    methods: {
      handleClick(tab,event)
      {
        setTabName(MESSAGE_TAB_KEY,tab.name);
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
